<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" th:href="@{/bootstrap.min.css}">
    <script th:src="@{/jquery-3.3.1.slim.min.js}"></script>
    <script th:src="@{/popper.min.js}"></script>
    <script th:src="@{/bootstrap.min.js}"></script>
    <script th:src="@{/vue.js}"></script>
    <script th:src="@{/axios.min.js}"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">后台管理</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" th:href="@{/release-work/admin/work}">发布工作管理 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:href="@{/release-work/admin/ucenter}">用户管理</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                    更多
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">小程序管理</a>
                    <a class="dropdown-item" href="#">L</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item disabled" href="#">待扩展</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">待扩展</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="搜索">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </div>
</nav>
<div class="container">
    <table class="table table-bordered table-hover text-center table-responsive">
        <thead>
        <tr>
            <th scope="col">id</th>
            <th scope="col">标题</th>
            <th scope="col">联系人</th>
            <th scope="col">电话</th>
            <th scope="col">类型</th>
            <th scope="col">内容</th>
            <th scope="col">审核</th>
            <th scope="col">发布时间</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in work.records">
            <th>{{15 * (current - 1) + index + 1}}</th>
            <td>
                <div style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
                    {{item.title}}
                </div>
            </td>
            <td>
                <div style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
                    {{item.name}}
                </div>
            </td>
            <td>
                <div style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
                    {{item.phone}}
                </div>
            </td>
            <td>
                <div style=" overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
                    {{item.typeOfWork == 1 ? '每日招工' : '每日找活'}}
                </div>
            </td>
            <td style="width: 25%;">
                <div
                        style=" overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;"
                        :title="item.claim"
                >
                    {{item.claim}}
                </div>
            </td>
            <td>
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" :id="index" :checked="item.status"
                           @change="changeStatus(item)">
                    <label class="custom-control-label" :for="index"></label>
                </div>
            </td>
            <td>{{item.gmtCreate}}</td>
            <td>
                <button type="button" class="btn btn-link" @click="deleteItem(item.id)">删除</button>
                <a type="button" class="btn btn-link" :href="'/release-work/admin/edit/' + item.id">修改</a>
            </td>
        </tr>
        </tbody>
    </table>
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous</span>
                </a>
            </li>
            <li class="page-item" v-for="index in work.pages" @click="getWorkList(index)">
                <a href="javascript:void(0)"
                   class="page-link">{{index}}</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                    <span class="sr-only">Next</span>
                </a>
            </li>
        </ul>
    </nav>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">发布工作/找工作</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="post" id="form" th:action="@{/release-work/work}">
                        <input type="hidden" name="_method" value="put"/>
                        <div class="form-group">
                            <label for="title">标题：</label>
                            <input type="text" class="form-control" name="title" id="title">
                        </div>
                        <div class="form-group">
                            <label for="typeOfWork">发布类型</label>
                            <select class="form-control" id="typeOfWork" name="typeOfWork">
                                <option value="0">每日招工</option>
                                <option value="1">每日找活</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="name">联系人：</label>
                            <input type="text" class="form-control" id="name" name="name">
                        </div>
                        <div class="form-group">
                            <label for="phone">手机号：</label>
                            <input type="text" class="form-control" id="phone" name="phone">
                        </div>
                        <div class="form-group">
                            <label for="company">公司：</label>
                            <input type="text" class="form-control" id="company" name="company">
                        </div>
                        <div class="form-group">
                            <label for="claim">详情：</label>
                            <input type="text" class="form-control" id="claim" name="claim">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">添加</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="excel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="excelTitle">Excel文件导入发布工作/找工作</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="excelSubmit" method="post" th:action="@{/release-work/upload/excel}"
                          enctype="multipart/form-data">
                        <div class="form-group">
                            <label for="excelFile">Excel文件</label>
                            <input type="file" class="form-control-file" id="excelFile" name="multipartFile">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <input type="submit" class="btn btn-primary" value="添加"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-primary btn-float" data-toggle="modal"
            data-target="#exampleModal">
        手动添加
    </button>
    <button type="button" class="btn btn-primary btn-float-excel" data-toggle="modal"
            data-target="#excel">
        excel添加
    </button>
    <button type="button" class="btn btn-primary" data-toggle="modal"
            data-target="#updataVariable" @click="isShow(0)">校验版本
    </button>
    <button type="button" class="btn btn-primary" data-toggle="modal"
            data-target="#updataVariable" @click="isShow(1)">上线版本
    </button>
</div>
<script>
    new Vue({
        el: ".container",
        data() {
            return {
                work: [], current: 1, showAdd: false,
                form: {
                    message: "你的招聘信息已经审核通过",
                    user: "",
                    work: ""
                },
                baseUrl: "https://we9.91gongju.cn:10000"
                //baseUrl: "https://localhost:10000"
            }
        },
        methods: {
            isShow(index) {
                let _this = this;
                _this.current = index;
                axios.post(`${_this.baseUrl}/mallappletbackstage/is-show/updata/isShow/${index}`).then(response => {
                    _this.work = response.data.dataMap.verify;
                }).catch(err => console.log(err));
            },
            getWorkList(index = 1) {
                let _this = this;
                _this.current = index;
                axios.get(`${_this.baseUrl}/release-work/admin/work/${index}`).then(response => {
                    _this.work = response.data.dataMap.verify;
                }).catch(err => console.log(err));
            },
            changeStatus(item) {
                item.status = item.status === 0 ? 1 : 0;
                axios.put(
                    `${this.baseUrl}/release-work/work`,
                    item
                ).then(response => {
                    axios.get(`${this.baseUrl}/user-release-work/one/${item.id}`).then(response => {
                        this.form.user = response.data.dataMap.data.userId;
                        this.form.work = item.id;
                        axios.post(`${this.baseUrl}/message/save`, this.form).catch(err => console.log(err));
                    });
                }).catch(err => console.log(err));
            },
            deleteItem(id) {
                let con = confirm('确定删除嘛');
                if (con) {
                    axios.delete(`${this.baseUrl}/release-work/work/${id}`).then(response => {
                    }).catch(err => console.log(err));
                    window.location.reload();
                }
            },
        },
        created() {
            this.getWorkList();
        }
    });
</script>
<style>
    .btn-float {
        position: fixed;
        right: 20px;
        bottom: 150px;
    }

    .btn-float-excel {
        position: fixed;
        right: 20px;
        bottom: 200px;
    }
</style>
</body>
</html>
